<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <async-box></async-box>
    </div>
</body>
<script>

    /*
        异步组件，是针对一些不确定什么时候可以拿到的组件，可以使用异步组件
        如一个组件是从服务器中获取得到的，那么该组件我们就不能确定它什么时候可以
        请求成功，还有可能请求失败，所以没办法确定能不能显示，那么我们就可以
        使用异步组件，在数据组件请求成功之后返回即可
    */


    const app = Vue.createApp({
        data() {
            return {}
        },
        methods: {},
    })

    // defineAsyncComponent 用来定义一个异步组件用的
    app.component('async-box', Vue.defineAsyncComponent(() => {
        return new Promise((resolve, reject) => {
            // 组件模板,假设该模板是来源于服务器
            const res = '<div> 从服务器获取到的组件 </div>'

            setTimeout(() => {
                if (res) {
                    resolve({
                        template: res,
                        data() {
                            return {

                            }
                        },
                        methods: {}
                    })
                } else {
                    resolve({
                        template: '<h1> 404 </h1>'
                    })
                }
            }, 3000)
        })
    }))

    const vm = app.mount('#app')
</script>

</html>